<template>
	<view class="info-education" :style="'height:'+ screenHeight +'px !important;'">
		<uni-nav-bar color="#ffffff" background-color="#007AFF" :status-bar="true" left-icon="arrowleft" title="学历设置"  right-text="保存" @clickLeft="back" @clickRight="saveaddress"/>
		<view class="info-education-list">
			<view class="info-education-list-left">
				毕业学校
			</view>
			<view class="info-education-list-right">
				<picker @change="xxPickerChange" :value="shcoolIndex" :range="Schools">
					<view class="education-tips" v-show="shcoolDisplay">
						<text style="color: #9BA8B7;" >请选择</text>
						<uni-icons type="arrowdown" size="15" color="#9BA8B7"></uni-icons>
					</view>
					<view class="uni-input" v-show="!shcoolDisplay">{{Schools[shcoolIndex]}}</view>
				</picker>
			</view>
		</view>
		<view class="info-education-list">
			<view class="info-education-list-left">
				所在学院
			</view>
			<view class="info-education-list-right">
				<picker @change="xyPickerChange" :value="collegeIndex" :range="Colleges">
					<view class="education-tips" v-show="collegeDisplay">
						<text style="color: #9BA8B7;" >请选择</text>
						<uni-icons type="arrowdown" size="15" color="#9BA8B7"></uni-icons>
					</view>
					<view class="uni-input" v-show="!collegeDisplay">{{Colleges[collegeIndex]}}</view>
				</picker>
			</view>
		</view>
		<view class="info-education-list">
			<view class="info-education-list-left">
				所学专业
			</view>
			<view class="info-education-list-right">
				<picker @change="zyPickerChange" :value="majorIndex" :range="Majors">
					<view class="education-tips" v-show="majorDisplay">
						<text style="color: #9BA8B7;" >请选择</text>
						<uni-icons type="arrowdown" size="15" color="#9BA8B7"></uni-icons>
					</view>
					<view class="uni-input" v-show="!majorDisplay">{{Majors[majorIndex]}}</view>
				</picker>
			</view>
		</view>
		<view class="info-education-list">
			<view class="info-education-list-left">
				所属学届
			</view>
			<view class="info-education-list-right">
				<input type="text" value="" placeholder="请填写" placeholder-style="color: #9BA8B7;"/>
				<text>届</text>
			</view>
		</view>
		<view class="info-education-list">
			<view class="info-education-list-left">
				所在班级
			</view>
			<view class="info-education-list-right">
				<input type="text" value="" placeholder="请填写" placeholder-style="color: #9BA8B7;"/>
				<text>班</text>
			</view>
		</view>
		<view class="info-education-list">
			<view class="info-education-list-left">
				获得证书/荣誉
			</view>
			<view class="info-education-list-right" @tap="openPopup">
				<uni-icons type="plus" size="15" color="#9BA8B7"></uni-icons>
			</view>
		</view>
		<view class="certificate-list">
			<view class="certificate-list-left">
				<view class="certificate-name">三好学生</view>
				<view class="certificate-explain">那边v的韩国的生存机会成本定价的角度看</view>
			</view>
			<view class="certificate-list-right">
				<uni-icons type="compose" size="20" color="#00aaff" class="certificate-list-editor"></uni-icons>
				<uni-icons type="closeempty" size="20" color="#ff0000" class="certificate-list-cancel"></uni-icons>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" >
			<view class="popup">
				<view class="popup-btn">
					<view class="cancel" @tap="popupCancel">取消</view>
					<view class="confirm" @tap="popupConfirm">确定</view>
				</view>
				<view class="popuptitle">
					证书名称
				</view>
				<view class="popupEnter">
					<input type="text" :value="certificate" @input="enterName" placeholder="请输入证书名称...." placeholder-style="color:#9BA8B7"/>
				</view>
				<view class="popuptitle">
					获奖说明
				</view>
				<view class="popupEnter">
					 <textarea placeholder-style="color:#9BA8B7" :value="explain" @input="enterExplain" placeholder="何时何地获得..."/>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shcoolDisplay:true,
				collegeDisplay:true,
				majorDisplay:true,
				zwDisplay:true,
				screenHeight: '',
				shcoolIndex: 0,
				Schools: ['四川大学','电子科技大学', '清华大学', '北京大学', '复旦大学'],
				collegeIndex:0,
				Colleges:['数学学院',"计算机科学学院",'美术学院'],
				majorIndex:0,
				Majors:['AAAAAAAA','BBBBBB','CCCCCCCCCC','DDDDDDDDDDD'],
				awards:[],
				certificate:'',
				explain:'',
			}
		},
		onLoad() {
		    this.screenHeight = uni.getSystemInfoSync().windowHeight;
		},
		methods: {
			xxPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.shcoolIndex = e.target.value;
				this.shcoolDisplay=false;
			},
			xyPickerChange(e){
				this.collgeIndex = e.target.value;
				this.collegeDisplay=false;
			},
			zyPickerChange(e){
				this.majorIndex=e.target.value;
				this.majorDisplay=false;
			},
			openPopup(e){
				this.$refs.popup.open();
			},
			popupCancel(e){
				this.$refs.popup.close();
			},
			popupConfirm(e){
				this.$refs.popup.close();
			},
			enterName(e){
				this.certificate=e.target.value;
			},
			enterExplain(e){
				this.explain=e.target.value;
			},
			back(){
				uni.navigateTo({
					url:"./user/info"
				})
			},
		}
	}
</script>

<style scoped lang="less">
	@import url("../../../static/color.less");
	.info-education{
		width: 100%;
		height: 100%;
		background-color: @colorLightGray;
	}
	.info-education-list{
		display: flex;
		padding: 25rpx;
		justify-content: space-between;
		background-color: @colorWrite;
		margin-top: 10rpx;
	}
	.info-education-list-right{
		display: flex;
	}
	.info-education-list-right input{
		font-size: 30rpx;
		width: 110rpx;
	}
	.info-education-list-right text{
		font-size: 30rpx;
	}
	.popup{
		background-color: @colorLightGray;
	}
	.popup-btn{
		padding: 25rpx;
		display: flex;
		justify-content: space-between;
		background-color: #f5f5f5;
	}
	.cancel{
		font-size: 35rpx;
		color: #aaaaaa;
	}
	.confirm{
		font-size: 35rpx;
		color: #1676FE;
	}
	.popuptitle{
		font-size: 35rpx;
		padding: 15rpx 30rpx;	
	}
	.popupEnter{
		font-size: 35rpx;
		background-color: #FFFFFF;
		border-radius: 25rpx;
	}
	.popupEnter input{
		padding: 15rpx;
	}
	.popupEnter textarea{
		padding: 15rpx;
	}
	.certificate-list{
		padding: 25rpx;
		background-color: #fafafa;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 5rpx;
	}
	.certificate-name{
		color: #626161;
	}
	.certificate-explain{
		color: #9c9e9f;
		font-size: 24rpx;
	}
	.certificate-list-cancel{
		padding-left: 20rpx;
	}
</style>
education